<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>商品列表</title>
    <link rel="stylesheet" href="../css/base.css" />
    <link rel="stylesheet" href="../css/list.css" />
  </head>

  <body>
    <div class="header container">
      商品列表
      <p style="display: block">
        <a href="./index.html" style="text-decoration: underline;">首页</a>
      </p>
    </div>

    <div class="filter container">
      <div class="cateBox">
        <p>分类</p>
        <ul class="category"></ul>
      </div>
      <div class="cateBox">
        <p>筛选</p>
        <ul class="filterBox hotBox">
          <li data-type="" class="active">全部</li>
          <li data-type="hot">热销</li>
          <li data-type="sale">折扣</li>
        </ul>
      </div>
      <div class="cateBox">
        <p>折扣</p>
        <ul class="filterBox saleBox">
          <li data-type="10" class="active">全部</li>
          <li data-type="5">5折</li>
          <li data-type="6">6折</li>
          <li data-type="7">7折</li>
          <li data-type="8">8折</li>
          <li data-type="9">9折</li>
        </ul>
      </div>
      <div class="cateBox">
        <p>排序</p>
        <ul class="filterBox sortBox">
          <li data-type="id" data-method="ASC" class="active">综合 正序</li>
          <li data-type="id" data-method="DESC">综合 倒序</li>
          <li data-type="sale" data-method="ASC">折扣 正序</li>
          <li data-type="sale" data-method="DESC">折扣 倒序</li>
          <li data-type="price" data-method="ASC">价格 正序</li>
          <li data-type="price" data-method="DESC">价格 倒序</li>
        </ul>
      </div>
      <div class="cateBox">
        <p>搜索</p>
        <input type="text" class="search" />
      </div>
    </div>

    <div class="pagination container">
      <span class="first disable">首页</span>
      <span class="prev disable">上一页</span>
      <p class="total">1 / 10</p>
      <span class="next">下一页</span>
      <span class="last">末页</span>
      <input type="number" class="jump" value="1" /><button class="go">
        跳转
      </button>
      <select class="pagesize">
        <option value="12">12</option>
        <option value="16">16</option>
        <option value="20">20</option>
        <option value="24">24</option>
      </select>
    </div>

    <ul class="list container">
      <li data-id="3">
        <div class="show">
          <img
            src="https://image4.suning.cn/uimg/b2c/newcatentries/0070081143-000000000131021736_2_800x800.jpg"
          />
          <span class="hot">热销</span>
          <span>折扣</span>
        </div>
        <div class="info">
          <p class="title">
            南极人 【5双礼盒装】男士袜子中筒棉袜四季商务袜透气袜子男P3014
          </p>
          <p class="price">
            <span class="curr">¥ 17.40</span>
            <span class="old">¥ 29.00</span>
          </p>
        </div>
      </li>
    </ul>
    <script src="../lib/jquery.js"></script>
    <script src="../lib/axios.js"></script>
    <script>
      $(function () {
        axios.get("http://localhost:9000/goods/category").then(function (res) {
          if (res.data.code === 1) {
            let html = '<li class="active">全部</li>';
            res.data.list.forEach(function (item, index) {
              html += `<li>${item}</li>`;
            });
            $(".category").html(html);
          } else {
            alert(res.data.message);
          }
        });

        const params = {
          current: 1,
          pagesize: 12,
          category: "",
          filter: "",
          saleType: 10,
          sortType: "id",
          sortMethod: "ASC",
          search: "",
        };

        $(".category").on("click", "li", function () {
          $(".category li").removeClass("active");
          $(this).addClass("active");
          params.category = $(this).text();
          if (params.category === "全部") params.category = "";
          params.current = 1;
          getList();
        });

        $(".next").on("click", function () {
          if (params.current < totalPage) {
            params.current++;
            $(".prev").removeClass("disable");
            getList();
          }
        });
        $(".prev").on("click", function () {
          if (params.current > 1) {
            params.current--;
            if (params.current === 1) {
              $(".prev").addClass("disable");
            }
            getList();
          }
        });

        $(document).on("click", ".saleBox li", function () {
          $(".saleBox li").removeClass("active");
          $(this).addClass("active");
          params.saleType = $(this).data("type") || $(this).data("method");
          params.current = 1;
          getList();
        });

        $(document).on("click", ".hotBox li", function () {
          $(".hotBox li").removeClass("active");
          $(this).addClass("active");
          params.filter = $(this).data("type") || $(this).data("method");
          params.current = 1;
          getList();
        });

        $(document).on("click", ".sortBox li", function () {
          $(".sortBox li").removeClass("active");
          $(this).addClass("active");
          params.sortType = $(this).data("type") || $(this).data("method");
          params.current = 1;
          getList();
        });

        $(".search").on("blur", function () {
          params.search = $(this).val();
          getList();
        });

        $(".go").on("click", function () {
          let pageNum = parseInt($(".jump").val(), 10);
          if (!isNaN(pageNum) && pageNum > 0) {
            params.current = pageNum;
            getList();
          } else {
            alert("请输入有效的页码");
          }
        });

        $(".pagesize").on("change", function () {
          params.pagesize = parseInt($(this).val(), 10);
          params.current = 1;
          getList();
        });

        function getList() {
          axios
            .get("http://localhost:9000/goods/list", { params: params })
            .then(function (res) {
              if (res.data.code === 1) {
                let html = res.data.list
                  .map(function (product) {
                    return `
                      <li data-id="${product.goods_id}">
                          <div class="show">
                              <img src="${product.img_big_logo}">
                              ${
                                product.is_hot
                                  ? '<span class="hot">热销</span>'
                                  : ""
                              }
                              ${product.is_sale ? "<span>折扣</span>" : ""}
                          </div>
                          <div class="info">
                              <p class="title">${product.title}</p>
                              <p class="price">
                                  <span class="curr">¥${
                                    product.current_price
                                  }</span>
                                  <span class="old">¥${product.price}</span>
                              </p>
                          </div>
                      </li>
                  `;
                  })
                  .join("");
                $(".list.container").html(html);
                $(".total").text(`${params.current}/${res.data.total}`);
                totalPage = res.data.total;
              } else {
                alert(res.data.message);
              }
            });
        }

        getList();

        $(".list.container").on("click", "li", function () {
          let id = $(this).data("id");
          sessionStorage.setItem("productId", id);
          window.location.href = "./detail.html";
        });
      });
    </script>
  </body>
</html>
